<template>
  <div
    class="common-header__nav bg-fog-9 p-6px text-text-3 scrollbar-hidden animate__animated animate__bounceInDown"
  >
    <div
      class="nav-item"
      :class="activeClass('Home')"
      @click="activeNav = 'Home'"
    >
      <svg
        width="18"
        height="18"
        viewBox="0 0 18 18"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clip-path="url(#clip0_3106_7338)">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M10.4729 0.532773L16.4187 5.48475C16.944 5.92189 17.2474 6.5699 17.2474 7.25326V15.6986C17.2474 16.9695 16.2169 18 14.9459 18H11.9999V13.09C11.9999 12.5377 11.5522 12.09 10.9999 12.09H6.99988C6.44759 12.09 5.99988 12.5377 5.99988 13.09V18H3.05426C1.78332 18 0.752808 16.9695 0.752808 15.6986V7.25326C0.752808 6.5699 1.05624 5.92189 1.58146 5.48475L7.5273 0.532773C8.38038 -0.177591 9.61982 -0.177591 10.4729 0.532773Z"
            fill="white"
          ></path>
        </g>
        <defs>
          <clipPath id="clip0_3106_7338">
            <rect width="18" height="18" fill="white"></rect>
          </clipPath>
        </defs>
      </svg>
      <span>{{ $t("home") }}</span>
    </div>
    <div
      class="nav-item"
      @click="activeNav = 'Casino'"
      :class="activeClass('Casino')"
    >
      <svg
        width="18"
        height="19"
        viewBox="0 0 18 19"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M9.50463 0.261719C9.89282 0.261719 10.2072 0.567117 10.2072 0.944516C10.2072 1.25351 9.99601 1.51391 9.70682 1.59851C10.2918 2.87471 11.0982 4.0363 12.1236 5.0827C12.2331 5.19451 12.3474 5.31006 12.4652 5.42914C14.3629 7.34768 17.1667 10.1823 15.7301 13.0861C14.8673 14.8303 13.1045 15.4818 11.0676 14.8423C10.6548 14.7127 10.083 14.3689 9.35163 13.8097H8.64905C7.91767 14.3683 7.34528 14.7127 6.93249 14.8423C4.89554 15.4812 3.13278 14.8303 2.27 13.0861C0.833147 10.1812 3.63767 7.3466 5.5358 5.4281C5.65325 5.30939 5.76723 5.19419 5.87652 5.0827C6.90009 4.0387 7.70467 2.87951 8.29086 1.60571C7.98546 1.53071 7.76107 1.26311 7.76107 0.944516C7.76107 0.567717 8.07546 0.261719 8.46365 0.261719C8.52785 0.261719 8.58965 0.270119 8.64905 0.285719L8.64845 4.0177L8.64905 4.0171V8.25668C8.23926 8.39708 7.94586 8.77688 7.94586 9.22268C7.94586 9.78848 8.41745 10.2469 9.00004 10.2469C9.58262 10.2469 10.0536 9.78848 10.0536 9.22268C10.0536 8.77688 9.76022 8.39708 9.35043 8.25668L9.34983 4.0171L9.35103 4.0177L9.34983 0.278519C9.39963 0.267719 9.45123 0.261719 9.50403 0.261719H9.50463ZM8.96735 18.2619H5.20371C5.12091 18.2619 5.05371 18.1947 5.05371 18.1119C5.05371 18.0639 5.07651 18.0189 5.11551 17.9907C5.6993 17.5647 6.28668 17.0169 6.87767 16.3479C7.60245 15.5271 8.19283 14.6811 8.64882 13.8105H8.93555H8.99981H9.28654C9.74253 14.6811 10.3329 15.5271 11.0577 16.3479C11.6481 17.0169 12.2355 17.5647 12.8193 17.9907C12.8583 18.0189 12.8811 18.0639 12.8811 18.1119C12.8811 18.1947 12.8145 18.2619 12.7311 18.2619H8.96795L8.96768 18.2254L8.96741 18.2619"
          fill="#65C316"
        ></path>
      </svg>
      <span>{{ $t("casino") }}</span>
    </div>
    <div
      class="nav-item"
      :class="activeClass('Sports')"
      @click="activeNav = 'Sports'"
    >
      <svg
        width="18"
        height="19"
        viewBox="0 0 18 19"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M0.392785 5.68379C0.392785 5.642 1.01249 5.642 1.01249 5.68379C1.01249 5.72557 0.923138 6.49956 2.21334 8.2121C3.50419 9.92527 4.3174 9.94199 5.25982 11.1859C6.20224 12.4298 6.20224 13.6126 6.1926 13.7611C6.18231 13.9083 5.75417 13.8884 5.50732 13.7611C5.26046 13.6338 4.68125 13.1472 4.18561 12.8656C3.20719 12.3096 2.15613 12.1727 1.08771 11.4951C-0.84792 10.2679 0.392785 5.72622 0.392785 5.68379ZM17.6092 5.68379C17.6092 5.72557 18.8499 10.2673 16.9143 11.4951C15.8471 12.1727 14.7954 12.3096 13.8164 12.8656C13.3207 13.1479 12.7415 13.6338 12.4947 13.7611C12.2478 13.8884 11.819 13.9083 11.8094 13.7611C11.7991 13.6126 11.7991 12.4298 12.7421 11.1859C13.6852 9.94199 14.4984 9.92527 15.7886 8.2121C17.0795 6.49892 16.9895 5.72557 16.9895 5.68379C16.9895 5.642 17.6092 5.642 17.6092 5.68379ZM8.3041 0.631027C8.30731 0.651598 8.3086 0.672169 8.3086 0.69274C8.3266 4.55109 8.33688 7.58274 8.33881 9.78898V11.4777C8.33624 13.2738 8.32531 14.1841 8.30603 14.2085C8.23981 14.2921 7.46132 14.2606 7.40668 14.2085C7.35203 14.1565 7.18425 11.8712 6.09397 10.5475C5.00369 9.22392 1.83765 7.10961 2.24971 4.00274C2.50428 2.08064 4.26184 0.850237 7.5211 0.31282L7.81296 0.267178C8.04889 0.231821 8.26874 0.395104 8.30345 0.631027H8.3041ZM10.1111 0.262032L10.1888 0.266531L10.4807 0.312173C13.7406 0.850234 15.4982 2.07999 15.7521 4.0021C16.1635 7.10896 12.9981 9.22328 11.9085 10.5469C10.8175 11.8705 10.6498 14.1558 10.5951 14.2079C10.5411 14.26 9.76198 14.2915 9.69577 14.2079C9.67649 14.1835 9.66556 13.2732 9.66299 11.4771V9.78834C9.66491 7.5821 9.6752 4.5498 9.6932 0.692094C9.6932 0.671523 9.69513 0.650952 9.6977 0.630381C9.73306 0.394457 9.95227 0.231175 10.1882 0.266531L10.1111 0.262032ZM0.848455 13.7144C0.617028 13.0047 1.05674 12.9398 2.49159 13.8513C3.92643 14.7629 5.57985 14.4826 5.89613 14.8657C6.21241 15.2476 5.57985 16.4465 4.07557 16.5526C2.5713 16.6586 1.08052 14.4247 0.849098 13.715L0.848455 13.7144ZM17.1542 13.7143C16.9228 14.424 15.4313 16.6585 13.9277 16.5518C12.4241 16.4451 11.7909 15.2469 12.1071 14.865C12.4234 14.4825 14.0768 14.7628 15.5117 13.8506C16.9465 12.9384 17.3862 13.004 17.1548 13.7137L17.1542 13.7143ZM8.09122 15.244C8.21079 15.244 8.30722 15.3404 8.30722 15.46V18.0461C8.30722 18.1657 8.21079 18.2621 8.09122 18.2621H8.08801C6.46866 18.2377 5.65931 17.9851 5.65931 17.5029C5.65931 17.3846 5.80974 17.2381 6.04438 17.0066L6.21216 16.8395C6.33109 16.7187 6.46416 16.5792 6.60494 16.4159C6.74573 16.2526 6.95016 15.9614 7.21951 15.541C7.33844 15.3552 7.54415 15.244 7.76465 15.244H8.09122ZM10.2386 15.2439C10.4591 15.2439 10.6649 15.3564 10.7844 15.5409C11.0538 15.9613 11.2582 16.2532 11.3983 16.4158C11.5385 16.5784 11.6716 16.7186 11.7911 16.8394L11.9589 17.0066C12.1929 17.2374 12.344 17.3846 12.344 17.5029C12.344 17.9843 11.5353 18.2376 9.91529 18.2621C9.79314 18.2621 9.69607 18.1656 9.69607 18.0461V15.4599C9.69607 15.3403 9.79314 15.2439 9.91207 15.2439H10.2386Z"
          fill="#EA6518"
        ></path>
      </svg>
      <span>{{ $t("sports") }}</span>
    </div>
    <div
      class="nav-item"
      :class="activeClass('Racing')"
      @click="activeNav = 'Racing'"
    >
      <svg
        width="19"
        height="19"
        viewBox="0 0 19 19"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clip-path="url(#clip0_3105_482)">
          <path
            d="M14.4478 0.261841C14.4208 0.261841 14.3848 0.261841 14.3578 0.270841C14.3128 0.279841 13.4668 0.504838 13.0078 0.954832C12.5488 1.40483 12.3058 1.99882 12.2158 2.44881C7.79677 2.60181 3.53977 5.08578 3.53977 10.3777C3.53977 11.7457 3.94477 13.9417 4.55677 14.8417C4.55677 14.8417 5.13277 16.0116 7.92277 17.5776C9.82178 18.2076 11.7298 18.2616 12.3598 18.2616C12.4678 18.2616 12.5398 18.2616 12.5578 18.2616C12.7108 18.2616 12.8368 18.1536 12.8818 18.0096C12.8998 17.9646 13.2328 16.9296 13.2328 15.8046C13.2328 14.6347 12.7648 13.8877 12.3148 13.1587C11.8288 12.3847 11.3248 11.5747 11.3248 10.1527C11.3248 9.42372 11.5858 8.88373 12.0988 8.53273C12.8458 9.92772 14.2498 10.2607 14.8348 10.3417C14.9518 10.6927 15.2218 11.2867 15.7078 11.4757C15.9238 11.5657 16.1668 11.5657 16.3828 11.4757C16.4908 11.5387 16.6258 11.5837 16.7518 11.5657C17.1298 11.5567 17.5168 11.2957 17.7868 10.8367C17.8138 10.7917 17.8408 10.7467 17.8768 10.7017C18.1738 10.2607 18.7768 9.34272 17.4358 8.05574C16.7968 5.31077 15.6538 3.96079 15.2218 3.4388L15.1678 3.3578C14.9608 3.1148 14.7448 2.87181 14.5198 2.63781L14.8078 0.657836C14.8258 0.540837 14.7808 0.423839 14.6998 0.34284C14.6278 0.29784 14.5378 0.261841 14.4478 0.261841ZM11.9638 0.33384C11.9458 0.33384 11.9368 0.34284 11.9188 0.34284C11.6398 0.378839 11.4508 0.603836 11.2528 0.828833C11.1718 0.918832 11.0188 1.08983 10.9378 1.13483C10.8658 1.11683 10.7128 0.999831 10.6138 0.936832C10.3348 0.747835 9.98378 0.504838 9.58778 0.594836C9.25478 0.657836 9.05678 0.981831 8.86778 1.27883C8.79578 1.39583 8.65178 1.61182 8.57078 1.67482C8.48978 1.64782 8.32778 1.54882 8.21977 1.48582C7.91377 1.30583 7.58977 1.11683 7.26577 1.22483C6.92377 1.34183 6.67177 1.80082 6.57277 2.13382C6.53677 2.24181 6.48277 2.43081 6.43777 2.50281C6.34777 2.49381 6.10477 2.42181 5.99677 2.37681C5.67277 2.23282 5.22277 2.19682 4.88977 2.35881C4.53877 2.53881 4.45777 3.1148 4.46677 3.4568C4.46677 3.5558 4.46677 3.7178 4.45777 3.79879C4.44877 3.87979 4.42177 3.89779 4.39477 3.91579C4.34977 3.95179 4.20577 3.95179 4.08877 3.96979C3.78277 4.00579 3.36877 3.94279 3.15277 4.21279C2.92776 4.51879 2.95476 4.87878 3.03576 5.22078C3.08076 5.33777 3.14376 5.58077 3.13476 5.62577C3.08976 5.67977 3.03576 5.71577 2.90076 5.76977C2.55876 5.88677 2.14476 6.03077 2.00976 6.44476C1.92876 6.72376 1.97376 6.89475 2.14476 7.16475C2.18976 7.23675 2.27076 7.37175 2.30676 7.44375C2.25276 7.48875 2.13576 7.56075 2.06376 7.59675C1.82076 7.73174 1.49676 7.92074 1.42476 8.30774C1.38876 8.58673 1.62276 8.88373 1.78476 9.11773C1.87476 9.23472 1.94676 9.40572 1.99176 9.47772C1.94676 9.52272 1.68576 9.77472 1.63176 9.81072C1.41576 9.97271 1.11876 10.1977 1.11876 10.5667C1.11876 10.8187 1.38876 11.4397 1.57776 11.6737C1.64976 11.7637 1.55076 11.9167 1.48776 12.0067C1.46076 12.0787 1.25376 12.3037 1.13676 12.4297C0.992761 12.6007 0.69576 13.0147 0.73176 13.3657C0.77676 13.7257 1.11876 14.1127 1.38876 14.3287C1.56876 14.4637 1.56876 14.5537 1.62276 14.5987C1.64076 14.6527 1.68576 14.6977 1.72176 14.7337C1.75776 14.7607 2.24376 15.2286 3.94477 15.2196C3.17977 14.0947 2.81976 11.6647 2.81976 10.3777C2.81976 4.81578 7.14877 2.07082 11.7388 1.76482C11.8558 1.46783 12.0538 1.00883 12.4588 0.540837C12.1618 0.34284 12.0268 0.32484 11.9638 0.33384ZM15.4828 0.945832L15.2758 2.42181C15.3388 2.48481 15.4018 2.56581 15.4648 2.63781C15.5818 2.28681 15.7528 1.90882 16.0408 1.59382C16.1308 1.50382 16.1668 1.36883 16.1308 1.24283C16.0948 1.11683 15.9868 1.02683 15.8608 0.990831C15.7438 0.963832 15.6268 0.945832 15.5098 0.945832H15.4828ZM14.5198 5.66177C14.8168 5.66177 15.0598 5.90477 15.0598 6.20176C15.0598 6.49876 14.8168 6.74176 14.5198 6.74176C14.2228 6.74176 13.9798 6.49876 13.9798 6.20176C13.9798 5.90477 14.2228 5.66177 14.5198 5.66177Z"
            fill="#FFBF39"
          ></path>
        </g>
        <defs>
          <clipPath id="clip0_3105_482">
            <rect
              width="18"
              height="18"
              fill="white"
              transform="translate(0.5 0.261719)"
            ></rect>
          </clipPath>
        </defs>
      </svg>
      <span>{{ $t("racing") }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const $t = key => {
  return t("common-header." + key);
};
const activeNav = ref<string>("home");
const activeClass = activeType => {
  return activeNav.value === activeType ? "nav-item--active" : "";
};
</script>

<style lang="less" scoped>
.common-header {
  &__nav {
    display: flex;
    overflow: auto;
    padding: 10px;
    .nav-item {
      height: 45px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      border-radius: 45px;
      > svg {
        flex-shrink: 0;
        height: 18px;
        width: 18px;
        margin-right: 6px;
      }
      > span {
        font-size: 14px;
      }
      &--active {
        border-radius: 45px;
        background: var(--fog-21);
      }
    }
  }
}
</style>
